<template>
  <div class="page">
    <el-row :gutter="20">
      <el-col :span="24" class="selectData">
        <span style="margin-right:20px;">责任单位:</span>
        <el-cascader
          class="userIntSize"
          v-model="dutyId"
          :options="deptTypeList"
          size="small"
          :props="departmentProp"
          :show-all-levels="false"
          @change="((value)=>{changeFamily1(value)})"
          ref="targetref"
        ></el-cascader>
      </el-col>
      <el-col :span="6" v-for="(i,index) in tableData" :key="index">
        <el-card class="box-card">
          <div class="tableStyle">
            <div :id="'a'+index"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dutyId: [],
      deptTypeList: [],
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
      tableData: [],
    };
  },
  mounted() {
    this.dataAnalysis();
  },
  methods: {
    dataAnalysis() {
      this.$axios.post("dept/getHaveScoreDeptList").then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.deptTypeList = data;
          this.dutyId =[this.deptTypeList[0].id,this.deptTypeList[0].departments[0].id];
          console.log( this.dutyId )
          this.getData(this.dutyId);
          // console.log( this.deptTypeList , 999)
          // this.getData(data[0].departments[0].id);
        }
      });
    },
    getData(val) {
      this.$axios
        .post("/deptScore/getQuarterScoreByDeptId", { deptId: val[1] })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            res.data.forEach((element, index) => {
              let att = [
                element.firstQuarter,
                element.secondQuarter,
                element.thirdQuarter,
                element.fourQuarter,
              ];
              setTimeout(() => {
                let table1 = this.$echarts.init(
                  document.getElementById(`${"a"}${index}`)
                );
                table1.setOption({
                  color: ["#8640B9"],
                  title: {
                    text: element.taskTitle,
                    left: "center",
                    textStyle: {
                      fontSize: 15,
                    },
                  },
                  // tooltip: {
                  //   trigger: "axis",
                  //   position: function (pt) {
                  //     return [pt[0], "10%"];
                  //   },
                  // },
                  xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["第一季度", "第二季度", "第三季度", "第四季度"],
                    axisLabel: {
                      // formatter: function (value) {
                      // return value.split("").join("\n");
                      // },
                    },
                  },
                  yAxis: {
                    type: "value",
                    minInterval: 1,
                    boundaryGap: [0, 0.1],
                  },
                  series: [
                    {
                      data: att,
                      type: "line",
                      areaStyle: {
                        color: "#F9E7F9",
                      },
                      smooth: 0.6,
                    },
                  ],
                });
              }, 1000);
            });
          }
        });
    },
    changeFamily1(val) {
      this.getData(val);
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
.tableStyle {
  width: 100%;
  height: auto;
  // padding-top: 40px;
  > div {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
  }
}
.tableStyleTop {
  width: 100%;
  height: auto;
  // padding-top: 40px;
  > div {
    width: 100%;
    height: 740px;
    margin-bottom: 20px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>